<!-- AUI Documentation -->
<!DOCTYPE html>
    <html>
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Fides Admin</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Favicons -->

        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/icons/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icons/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icons/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/images/icons/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="assets/images/icons/favicon.png">

        <!--[if lt IE 9]>
          <script src="assets/js/minified/core/html5shiv.min.js"></script>
          <script src="assets/js/minified/core/respond.min.js"></script>
        <![endif]-->

        <!-- Fides Admin CSS Core -->

        <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css">

        <!-- Theme UI -->

        <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css">

        <!-- Fides Admin Responsive -->

        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/common.min.css">
        <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/responsive.min.css">

        <!-- Fides Admin JS -->

        <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

        <script>
            jQuery(window).load(
                function(){

                    var wait_loading = window.setTimeout( function(){
                      $('#loading').slideUp('fast');
                      jQuery('body').css('overflow','auto');
                    },1000
                    );

                });
        </script>

        <script type="text/javascript" src="../_assets/syntax-highlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../_assets/syntax-highlighter/scripts/shBrushPhp.js"></script>
        <link type="text/css" rel="stylesheet" href="../_assets/syntax-highlighter/styles/shCoreDefault.css">
        <script type="text/javascript">SyntaxHighlighter.all();</script>

    </head>
    <body>

        <div id="loading" class="ui-front loader ui-widget-overlay bg-white opacity-100">
            <img src="assets/images/loader-dark.gif" alt="">
        </div>

        <div id="page-wrapper">

            <div class="theme-customizer">
                <a href="javascript:;" class="change-theme-btn" title="Change theme">
                    <i class="glyph-icon icon-cog"></i>
                </a>
                <div class="theme-wrapper">

                    <div class="popover-title">Boxed layout options</div>
                    <div class="pad10A clearfix">
                        <a class="fluid-layout-btn hidden bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Full width layout</span></a>
                        <a class="boxed-layout-btn bg-blue-alt medium btn" href="javascript:;" title=""><span class="button-content">Boxed layout</span></a>
                    </div>
                    <div class="popover-title">Boxed backgrounds</div>
                    <div class="pad10A clearfix">
                        <a href="javascript:;" class="choose-bg" boxed-bg="#000" style="background: #000;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#333" style="background: #333;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#666" style="background: #666;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#888" style="background: #888;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#383d43" style="background: #383d43;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fafafa" style="background: #fafafa; border: #ccc solid 1px;" title=""></a>
                        <a href="javascript:;" class="choose-bg" boxed-bg="#fff" style="background: #fff; border: #eee solid 1px;" title=""></a>
                    </div>
                    <div class="popover-title">Color schemes</div>
                    <div class="pad10A clearfix change-layout-theme">
                        <p class="font-gray-dark font-size-11 pad0B">More color schemes will be available soon!</p>
                        <div class="divider mrg10T mrg10B"></div>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-blue" title="">
                            <span style="background: #2381E9;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-green" title="D">
                            <span style="background: #78CE12;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme" layout-theme="dark-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                        <a href="javascript:;" class="choose-theme opacity-30 mrg15R" layout-theme="white-orange" title="">
                            <span style="background: #FF6041;"></span>
                        </a>
                    </div>

                </div>
            </div>

            <div id="page-header" class="clearfix">
                <div id="header-logo">Documentation</div>
                <div class="hide" id="black-modal-60" title="Modal window example">
                    <div class="pad20A">

                        <div class="infobox notice-bg">
                            <div class="bg-azure large btn info-icon">
                                <i class="glyph-icon icon-bullhorn"></i>
                            </div>
                            <h4 class="infobox-title">Modal windows</h4>
                            <p>Thanks to the solid modular Fides Admin arhitecture, modal windows customizations are very flexible and easy to apply.</p>
                        </div>

                        <h4 class="heading-1 mrg20T clearfix">
                            <div class="heading-content" style="width: auto;">
                                Icons
                                <small>
                                    All icons across the Fides Admin Framework use FontAwesome icons.
                                </small>
                            </div>
                            <div class="clear"></div>
                            <div class="divider"></div>
                        </h4>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-compass" href="../icon/compass"><i class="glyph-icon icon-compass"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse" href="../icon/collapse"><i class="glyph-icon icon-collapse"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-collapse-top" href="../icon/collapse-top"><i class="glyph-icon icon-collapse-top"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-expand" href="../icon/expand"><i class="glyph-icon icon-expand"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-eur" href="../icon/eur"><i class="glyph-icon icon-eur"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-euro" href="../icon/eur"><i class="glyph-icon icon-euro"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-gbp" href="javascript:;"><i class="glyph-icon icon-gbp"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-usd" href="javascript:;"><i class="glyph-icon icon-usd"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-dollar" href="javascript:;"><i class="glyph-icon icon-dollar"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-inr" href="javascript:;"><i class="glyph-icon icon-inr"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-rupee" href="javascript:;"><i class="glyph-icon icon-rupee"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-jpy" href="javascript:;"><i class="glyph-icon icon-jpy"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-yen" href="javascript:;"><i class="glyph-icon icon-yen"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-cny" href="javascript:;"><i class="glyph-icon icon-cny"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-renminbi" href="javascript:;"><i class="glyph-icon icon-renminbi"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-krw" href="javascript:;"><i class="glyph-icon icon-krw"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-won" href="javascript:;"><i class="glyph-icon icon-won"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-btc" href="javascript:;"><i class="glyph-icon icon-btc"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-bitcoin" href="javascript:;"><i class="glyph-icon icon-bitcoin"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file" href="javascript:;"><i class="glyph-icon icon-file"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-file-text" href="javascript:;"><i class="glyph-icon icon-file-text"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-alphabet-al" href="javascript:;"><i class="glyph-icon icon-sort-by-alphabet-alt"></i>t</a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attributes" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-attribu" href="javascript:;"><i class="glyph-icon icon-sort-by-attributes-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order" href="javascript:;"><i class="glyph-icon icon-sort-by-order"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-sort-by-order-alt" href="javascript:;"><i class="glyph-icon icon-sort-by-order-alt"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-up" href="javascript:;"><i class="glyph-icon icon-thumbs-up"></i></a>

                        <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" title="icon-thumbs-down" href="javascript:;"><i class="glyph-icon icon-thumbs-down"></i></a>

                    </div>
                </div>

                <div class="hide" id="white-modal-80" title="Dialog with tabs">
                    <div class="tabs pad15A remove-border opacity-80">
                        <ul class="opacity-80">
                            <li><a href="#example-tabs-1">First</a></li>
                            <li><a href="#example-tabs-2">Second</a></li>
                            <li><a href="#example-tabs-3">Third</a></li>
                        </ul>
                        <div id="example-tabs-1">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-2">
                            <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                        <div id="example-tabs-3">
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                            <p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
                            </p>
                        </div>
                    </div>
                    <div class="pad10A">
                        <div class="infobox success-bg radius-all-4">
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
                        </div>
                    </div>
                    <div class="ui-dialog-buttonpane clearfix">

                        <a href="dropdown_menus.html" class="btn medium float-left bg-azure">
                            <span class="button-content text-transform-upr font-size-11">Dropdown menus</span>
                        </a>
                        <div class="button-group float-right">
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-star"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-random"></i>
                            </a>
                            <a href="buttons.html" class="btn medium bg-black" title="View more buttons examples">
                                <i class="glyph-icon icon-map-marker"></i>
                            </a>
                        </div>
                        <a href="javascript:;" class="medium btn bg-blue-alt float-right mrg10R tooltip-button" data-placement="left" title="Remove comment">
                            <i class="glyph-icon icon-plus"></i>
                        </a>

                    </div>
                </div>
                
                
                <div class="top-icon-bar">
                    
                    
                    
                    
                </div>

            </div><!-- #page-header -->

            <div id="page-sidebar" class="scrollable-content">

                <div id="sidebar-menu">
                    <ul>
                        <li>
                            <a href="index.html" title="Dashboard">
                                <i class="glyph-icon icon-dashboard"></i>
                                Dashboard
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="Components">
                                <i class="glyph-icon icon-code"></i>
                                Components
                            </a>
                            <ul>
                                <li>
                                    <a href="dashboard_panels.html" title="Dashboard panels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dashboard panels
                                    </a>
                                </li>
                                <li>
                                    <a href="social_boxes.html" title="Social boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Social boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="information_boxes.html" title="Information boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Information boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="chat.html" title="Chat">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Chat
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications.html" title="Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="messaging.html" title="Messaging">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Messaging
                                    </a>
                                </li>
                                <li>
                                    <a href="progress_bars.html" title="Progress">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Progress
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Pages">
                                <i class="glyph-icon icon-folder-open"></i>
                                Pages
                            </a>
                            <ul>
                                <li>
                                    <a href="grid.html" title="Grid Layouts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Grid Layouts
                                    </a>
                                </li>
                                <li>
                                    <a href="helper_classes.html" title="Helpers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Helpers
                                    </a>
                                </li>
                                <li>
                                    <a href="login.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 1
                                    </a>
                                </li>
                                <li>
                                    <a href="login-alt.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 2
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Widgets">
                                <i class="glyph-icon icon-tags"></i>
                                Widgets
                            </a>
                            <ul>
                                <li>
                                    <a href="tabs.html" title="Tabs">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tabs
                                    </a>
                                </li>
                                <li>
                                    <a href="accordions.html" title="Accordions">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Accordions
                                    </a>
                                </li>
                                <li>
                                    <a href="datepicker.html" title="Datepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Datepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="timepicker.html" title="Timepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Timepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="colorpicker.html" title="Colorpicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Colorpicker
                                    </a>
                                </li>
                                <li>
                                    <a href="slider.html" title="Sliders">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sliders
                                    </a>
                                </li>
                                <li>
                                    <a href="jgrowl_notifications.html" title="JGrowl Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JGrowl Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="noty_notifications.html" title="Noty Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Noty Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="modal_windows.html" title="Modal Windows">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Modal Windows
                                    </a>
                                </li>
                                <li>
                                    <a href="tooltips.html" title="Tooltips">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tooltips
                                    </a>
                                </li>
                                <li>
                                    <a href="popovers.html" title="Popovers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Popovers
                                    </a>
                                </li>
                                <li>
                                    <a href="sortable.html" title="Sortable Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sortable Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="dropdown_menus.html" title="Dropdown Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropdown Menus
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Elements">
                                <i class="glyph-icon icon-laptop"></i>
                                Elements
                            </a>
                            <ul>
                                <li>
                                    <a href="content_boxes.html" title="Content Boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Content Boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="response_messages.html" title="Response Messages">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Response Messages
                                    </a>
                                </li>
                                <li>
                                    <a href="badges.html" title="Badges &amp; Labels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Badges &amp; Labels
                                    </a>
                                </li>
                                <li>
                                    <a href="overlays.html" title="Overlays">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Overlays
                                    </a>
                                </li>
                                <li>
                                    <a href="navigation_menus.html" title="Navigation Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Navigation Menus
                                    </a>
                                </li>
                                <li>
                                    <a href="icons.html" title="Icons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Icons
                                    </a>
                                </li>
                                <li>
                                    <a href="buttons.html" title="Buttons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Buttons
                                    </a>
                                </li>
                                <li>
                                    <a href="pagination.html" title="Pagination">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pagination
                                    </a>
                                </li>
                                <li>
                                    <a href="typography.html" title="Typography">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Typography
                                    </a>
                                </li>
                                <li>
                                    <a href="animations.html" title="Animations">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Animations
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Charts">
                                <i class="glyph-icon icon-bar-chart-o"></i>
                                Charts
                            </a>
                            <ul>
                                <li>
                                    <a href="charts_piegauges.html" title="Pie Gauges">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pie Gauges
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_justgage.html" title="JustGage">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JustGage
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_sparklines.html" title="Sparklines">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sparklines
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_morris.html" title="Morris Charts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Morris Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Tables">
                                <i class="glyph-icon icon-table"></i>
                                Tables
                            </a>
                            <ul>
                                <li>
                                    <a href="tables.html" title="Normal tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Normal tables
                                    </a>
                                </li>
                                <li>
                                    <a href="tables_dynamic.html" title="Dynamic tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dynamic tables
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Forms">
                                <i class="glyph-icon icon-sort-amount-asc"></i>
                                Forms
                            </a>
                            <ul>
                                <li>
                                    <a href="forms.html" title="Layouts &amp; Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Layouts &amp; Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_validation.html" title="Forms validation">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Forms validation
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Help &amp; Support">
                                <i class="glyph-icon icon-book"></i>
                                Help &amp; Support
                            </a>
                            <ul>
                                <li>
                                    <a href="docs.html" title="Getting started guide">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Getting started guide
                                    </a>
                                </li>
                                <li>
                                    <a href="http://agileui.com/support-forums" title="Support forums">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Support forums
                                    </a>
                                </li>

                            </ul>
                        </li>
                    </ul>
                    <div class="divider mrg5T mobile-hidden"></div>
                    <div class="text-center mobile-hidden">
                        <div class="button-group display-inline">
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Messages">
                                <i class="glyph-icon icon-flag"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Mailbox">
                                <i class="glyph-icon icon-inbox"></i>
                            </a>
                            <a href="javascript:;" class="btn medium bg-green tooltip-button" data-placement="top" title="Content">
                                <i class="glyph-icon icon-hdd"></i>
                            </a>
                        </div>

                    </div>
                </div>

            </div><!-- #page-sidebar -->
            <div id="page-content-wrapper" style="padding: 25px;">

<h4 class="heading-1 clearfix">
    <div class="heading-content">
        Fides Admin Documentation
        <small>
            Below you will find a quick getting started guide. The left side menu contains source codes for all the included widgets, elements, components, etc.
        </small>
    </div>
    <div class="clear"></div>
    <div class="divider"></div>
</h4>

<h2>What is Fides Admin</h2>
<p class="font-gray-dark">The AUI Framework is a HTML/CSS/JS framework that helps you quickly build modern, beautiful and accessible user interfaces for interactive web applications. It is powered by jQuery and includes a lot of UI interactions, effects, widgets, elements, components and themes. These make AUI a very powerful companion when it comes to solving all kinds of use cases. Read through the documentation to get an idea of how many widgets and elements are available. </p>

<div class="divider"></div>

<h2>Who is it for?</h2>
<p class="font-gray-dark">AUI is for both designers and developers. Designers can use the three layer theming system to create new styles. Because, in general, developers do not have an eye for design, the AUI framework helps them by removing the design-related issues and lets them concentrate on the app programming part.</p>

<div class="divider"></div>

<h2>Installing and Getting Started</h2>
<p class="font-gray-dark">First you need to download and uzip the AUI package archive.</p>
<p class="font-gray-dark">The package contains the following:</p>
<ul>
    <li><b>_build</b> - contains Grunt.js and the required Node.js plugins that are needed to minify and concatenate the assets files and to generate the demo &amp; docs html files.</li>
    <li><b>_assets</b> - contains all the source code css, js, font and image development files uncompressed and unminified.</li>
    <li><b>_content</b> - contains all the html files used in the generation of the demo &amp; docs files.</li>
    <li><b>documentation</b> - contains the documentation files</li>
    <li><b>production</b> - contains example HTML files with all widgets &amp; elements in action and production-ready assets (minified js files, concatenated, etc)</li>
    <li><b>changelog.txt</b> - changelog between version</li>
    <li><b>License</b> - Fides Admin licence information</li>
    <li><b>Readme.md</b> - General informations about Fides Admin</li>
</ul>

<div class="divider"></div>

<h2>Production-ready vs. Development Assets</h2>
<p class="font-gray-dark">The AUI framework package contains both the development &amp; production-ready files. Development files are represented by the uncompressed, standalone CSS and JS files. These should be used during development or debugging. In production-ready applications we recommend using the compressed and concatenated versions for CSS and JS files because it saves bandwidth and improves performance.</p>
<p class="font-gray-dark">In the document root you will notice three directories that start with underscore: <b>_assets</b>, <b>_build</b> and <b>_content</b>. These directories contain the development files that are used to generate the production-ready assets, demonstration &amp; documentation files. To generate these files we use Grunt. You can find the tasks configurations in <b>_build/Gruntfile.js.</b></p>

<p class="font-gray-dark">The root <b>/_assets/</b> folder contains the development files(css, js, images, fonts) which are uncompressed and standalone. The production assets can be found in the document root under <b>/production/assets/</b>.</p>
<p class="font-gray-dark">In the production assets directory each css and js file is minified under their respective <b>/minified/</b> folder.</p>
<p class="font-gray-dark">Each css &amp; js group (elements, widgets, components, etc) is also minified and concatenated together and can be found in <b>/production/assets/</b>.</p>
<p class="font-gray-dark">For example, the js core files are concatenated in <b>/production/assets/js/aui-core.js</b>. The minified version for this file is in <b>/production/assets/js/aui-core.min.js</b></p>
<p class="font-gray-dark">Another example is the tabs widget css development file which can be found in the document root under <b>/assets/css/widgets/tabs.css</b>. The production version can be found in <b>/production/assets/css/widgets/minified/tabs.min.css</b></p>
<p class="font-gray-dark">The <b>tabs.min.css</b> is also included in <b>/production/assets/css/aui-widgets.min.css</b> which contains all the widget css development files minified and concatenated.</p>
<p class="font-gray-dark">There is also a master minified css file that contains all the development css files from <b>/_assets/css/</b> that can be found in <b>/production/assets/app-production.min.css</b></p>

<div class="divider"></div>

<h2>Using Fides Admin</h2>
<p class="font-gray-dark">To use Fides Admin you need to include in your pages the following CSS and JS files.

<h3>All assets included</h3>
</p><p>This example shows a standard HEAD section for a production-ready page that has <b>all</b> the JS &amp; CSS files compressed, concatenated and included.</p>

<pre class="brush: php;">
    <!-- Fides Admin CSS -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css">

    <!-- Theme UI -->

    <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css">
    <link id="elements-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css">

    <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/responsive.min.css">

    <!-- Fides Admin JS -->

    <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

</pre>

<div class="divider"></div>

<h3>Selective included assets</h3>
<p>An example HEAD section for a page that uses only certain widgets &amp; CSS files.</p>

<pre class="brush: php;">

    <!-- Fides Admin CSS -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-helpers.min.css">

    <!-- Fides Admin CSS Widgets -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/elements/buttons.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/datepicker.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/tabs.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/dropdown.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/tooltip.min.css">

    <!-- Theme UI -->

    <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css">
    <link id="elements-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/fides/color-schemes/dark-blue.min.css">

    <link rel="stylesheet" type="text/css" href="assets/themes/minified/fides/responsive.min.css">

    <!-- Fides Admin JS (Uncomment the next line) -->

    <!-- <script type="text/javascript" src="assets/js/minified/aui-core.min.js"></script> -->

    <!-- Fides Admin JS Widgets -->

    <script type="text/javascript" src="assets/js/minified/widgets/jqueryui-datepicker.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/jqueryui-tabs.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/bootstrap-dropdown.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/bootstrap-tooltip.min.js"></script>

</pre>

<div class="divider"></div>

<h3>Required core files</h3>
<p class="font-gray-dark">These files are required and should not be removed. Development core js files are in <b>/_assets/js/core/</b>. The production-ready minified files are in <b>/production/js/core/</b>. The file that contains all the core js minified and concatenated can be found in <b>/production/assets/js/aui-core.min.js</b>.</p>

<b>Core js files:</b>
<ul>
    <li>jquery.1.10.2.js</li>
    <li>jquery.ui.core.js</li>
    <li>jquery.ui.mouse.js</li>
    <li>jquery.ui.position.js</li>
    <li>jquery.ui.widget.js</li>
</ul>

<div class="divider"></div>

<h2>Generating files locally</h2>
<p class="font-gray-dark">To generate the demo and docs files we use Grunt - the javascript task runner. To find out more about it read the <a href="http://gruntjs.com/getting-started" target="_blank" title="Grunt.js documentation">Grunt.js documentation</a>.</p>

<div class="divider"></div>

<h2>Theming</h2>
<p class="font-gray-dark">Because of the modular JS and CSS arhitecture you can use Fides Admin to style both new and existing applications. The theming system is split into two layers which work seamlessly together: the layout style, the elements style and the core style helpers. Each theming CSS file has a minified version in <b>/production/assets/themes/minified/THEME_NAME/</b></p>

<p>You can use layout and elements styling files from different color schemes and even from different themes. For example, you can use the layout style (layout.css) from <b>/assets/themes/agileui/color-schemes/default/layout.css</b> together with the elements style from <b>/assets/themes/ANOTHER_THEME_NAME/color-schemes/green/elements.css</b>.

<h3>Layout style</h3>
</p><p>Contains all the styling need for the page layout (top menu, header, sidebar, main content area, footer). The layout style can be found in <b>/_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/layout.css</b>.</p>

<h3>Elements style</h3>
<p>Contains all the styling need for the elements and widgets (buttons, tabs, menus, boxes, etc). The elements style can be found in <b>/_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/elements.css</b>. </p>

<h3>Core style helpers</h3>
<p>Beside the layout &amp; elements styling that comes from the selected theme you can also style some elements using the CSS core helper classes. These files can be found in <b>/production/assets/css/minified/helpers/colors.min.css</b>. <a href="/documentation/helper_classes.html" target="_blank" title="Helper classes documentation">Click here</a> to read more about Helper classes.</p>

<h3>Responsive layouts</h3>
<p>This file makes Fides Admin responsive for both mobile and tablet devices. The responsive layout styling can be found in <b>/_assets/themes/THEME_NAME/responsive.css</b>.</p>

<div class="divider"></div>

<h3>Sources and Credits</h3>
<p>All the jQuery widgets, plugins and fonts, icons, CSS assets that are used by Fides Admin have free distribution and modification licenses (GPL, MIT, Apache 2.0). We also want to thank their respective owners for all the hard work they put into making the web an easier place.</p>
<ul>
    <li>jQuery v1.10.2</li>
    <li>jQuery UI v1.10.3</li>
    <li>jQuery UI Touch Punch 0.2.2</li>
    <li>jQuery Cookie Plugin v1.3.1</li>
    <li>Modernizr 2.6.2</li>
    <li>Raphaël 2.1.0</li>
    <li>Twitter Bootstrap 3.0</li>
    <li>JustGage v1.0</li>
    <li>Morris Charts v0.4.3</li>
    <li>EasyPieChart v1.2.1</li>
    <li>Sparkline Charts v2.1.2 </li>
    <li>Chosen Selects v1.0</li>
    <li>MiniColors</li>
    <li>DataTables v1.9.4</li>
    <li>jGrowl v1.2.12</li>
    <li>Noty v2.1.0</li>
    <li>Nicescroll v3.5.1</li>
    <li>Autosize v1.17.1</li>
    <li>Uniform v2.1.0</li>
    <li>Parsley</li>
</ul>


                	</div><!-- #page-content -->
            </div><!-- #page-main -->
        <!-- #page-wrapper -->

    </body>
</html>

